<template>
  <div class="bg">
    <div class="logo_title">
      <img src="../assets/img/sign.png" alt="school_logo">
    </div>
    <div class="center">
      <div class="title">
        计算机组成原理虚拟仿真平台系统
      </div>
      <div class="login_form">
        <el-form :model="loginForm"
                 status-icon
                 :rules="loginFormRules"
                 ref="loginFormRef"
                 label-position="left"
                 label-width="0px"
                 class="login-page">
          <div class="login_title">账号登录
            <div class="tiao"></div>
          </div>
          <!--            el-icon-s-custom-->
          <el-form-item class="form_item" prop="username" required>
            <el-input class="input_first"
                      v-model="loginForm.username"
                      auto-complete="off"
                      placeholder="请输入用户名"
            > <i slot="prefix">
              <svg class="icons" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <path d="M3.85447014,22 C2.28451157,22 1,20.65 1,19 C1,18.8 1,18.55 1.04757449,18.35 C1.742828,15.0426224 4.04236001,12.474749 6.99365313,11.4654451 C5.65390376,10.2761933 4.8059602,8.49565217 4.8059602,6.5 C4.8059602,2.89999999 7.56528133,2.30926389e-14 10.9906455,2.30926389e-14 C14.4160097,2.30926389e-14 17.1753308,2.89999999 17.1753308,6.5 C17.1753308,8.4916896 16.3307513,10.2691215 14.9960662,11.4597496 C17.945788,12.4636479 20.2736311,15.0354711 20.9337165,18.35 C21.266738,19.95 20.315248,21.55 18.7452894,21.95 C18.5549914,22 18.3171189,22 18.1268209,22 L3.85447014,22 Z M12.1800081,13 L11.0356862,12.9998328 C11.0206856,12.9999442 11.005672,13 10.9906455,13 L10.946,12.999 L9.80128295,13 C6.51864229,13 3.61659765,15.4 2.90298009,18.8 C2.80783108,19.35 3.09327809,19.85 3.61659762,20 L10.039,19.999 L10.0391555,16.5 C10.0391555,15.95 10.467326,15.5 10.9906455,15.5 C11.513965,15.5 11.9421356,15.95 11.9421356,16.5 L11.942,19.999 L18.1268209,20 C18.6501404,20 19.0783109,19.6 19.0783109,19 L19.0783109,18.75 C18.3646934,15.4 15.5102232,13 12.1800081,13 Z M10.9906455,1.99999999 C8.61192038,1.99999999 6.70894029,3.99999999 6.70894029,6.49999999 C6.70894029,8.99999999 8.61192038,11 10.9906455,11 C13.3693706,11 15.2723507,8.99999999 15.2723507,6.49999999 C15.2723507,3.99999999 13.3693706,1.99999999 10.9906455,1.99999999 Z" fill="#009199"></path>
              </svg>
            </i>

            </el-input>

          </el-form-item>
          <el-form-item class="form_item1" prop="password" required>
            <el-input type="password" class="input_first"
                      v-model="loginForm.password"
                      auto-complete="off"
                      placeholder="请输入密码"
            >
              <i slot="prefix">
                <svg class="icons" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <path d="M3.66226667,10.0879167 C3.15866262,10.0881188 2.75040462,10.4962127 2.75,10.9998167 L2.75,19.2545833 C2.75040451,19.7581157 3.15855087,20.16618 3.66208333,20.1664833 L18.3379167,20.1664833 C18.8414491,20.16618 19.2495955,19.7581157 19.25,19.2545833 L19.25,10.9996333 C19.2495954,10.4960294 18.8413374,10.0879355 18.3377333,10.0877333 L3.6619,10.0877333 L3.66226667,10.0879167 Z M18.3379167,22 L3.66208333,22 C2.14866667,22 0.916666674,20.768 0.916666674,19.2545833 L0.916666674,10.9996333 C0.916666674,9.48621665 2.14866667,8.2544 3.6619,8.2544 L18.3377333,8.2544 C19.85115,8.2544 21.08315,9.4864 21.08315,10.9996333 L21.08315,19.2544 C21.08315,20.7676333 19.85115,21.9996333 18.3377333,21.9996333 L18.3379167,22 Z M16.5,10.0833333 L14.6666667,10.0833333 L14.6666667,5.5 C14.6666667,3.47783333 13.0221667,1.83333333 11,1.83333333 C8.97783333,1.83333333 7.33333333,3.47783333 7.33333333,5.5 L7.33333333,10.0833333 L5.5,10.0833333 L5.5,5.5 C5.5,2.46675 7.96675,0 11,0 C14.03325,0 16.5,2.46675 16.5,5.5 L16.5,10.0833333 Z M11,17.4166667 C10.4958333,17.4166667 10.0833333,17.0041667 10.0833333,16.5 L10.0833333,13.75 C10.0833333,13.2458333 10.4958333,12.8333333 11,12.8333333 C11.5041667,12.8333333 11.9166667,13.2458333 11.9166667,13.75 L11.9166667,16.5 C11.9166667,17.0041667 11.5041667,17.4166667 11,17.4166667 Z" fill="#009199"></path>
                </svg>
              </i>
            </el-input>
          </el-form-item>
          <!--        验证码-->
          <el-form-item class="form_item1" prop="code">
            <el-input @keyup.enter.native="login" class="input_first" type="text" v-model="loginForm.code" placeholder=" - - - -">
              <template slot="suffix">
                <div class="yanzheng"  @click="refreshCode">
                  <Identify class="yanzheng1"  :identifyCode="identifyCode"></Identify>
                </div>
              </template>
              <i slot="prefix">
                <svg class="icons" viewBox="0 0 22 22" version="1.1">
                  <path d="M11.0249434,0.537109375 C14.4688457,2.15275586 17.2114336,3.03316406 19.2527285,3.17826953 C19.5901191,3.20224609 19.8515625,3.48293945 19.8515625,3.82116797 L19.8515625,11.7986816 C19.139377,16.5115371 16.1888633,19.7329688 11,21.4628906 C5.74412695,19.726459 2.79361328,16.5050488 2.1484375,11.7986816 L2.1484375,4.29307227 C2.1484375,3.70594727 2.59488281,3.21507227 3.17938672,3.15951367 C5.23617187,2.96404883 7.85137891,2.08991406 11.0249219,0.537109375 L11.0249434,0.537109375 Z M11.020002,2.60107031 C8.06046484,4.05158789 5.70689453,4.764375 3.95922656,4.73945313 L3.90646094,4.73848633 L3.90646094,11.6411582 C4.42352539,15.4190996 6.78803125,18.0050234 11,19.3989297 C15.116707,18.024123 17.4753262,15.4758828 18.0758574,11.7542734 L18.0935176,11.6411367 L18.0935176,4.73846484 C16.4173281,4.74188086 14.0595039,4.02941602 11.020002,2.60107031 Z M15.7610234,7.78746289 C16.0588184,8.08663281 16.0588184,8.5713418 15.7610234,8.87051172 L10.4162266,14.2347949 C10.2731965,14.3782939 10.0789312,14.4589844 9.87632422,14.4589844 C9.68064453,14.4589844 9.48573828,14.3840039 9.33642187,14.2347949 L6.28194531,11.1696191 C5.98415039,10.8704277 5.98415039,10.3849453 6.28194531,10.0857754 C6.58051367,9.78660547 7.06393359,9.78660547 7.36172852,10.0857754 L9.8763457,12.6090508 L14.6812402,7.78744141 C14.9790352,7.48749805 15.4624551,7.48749805 15.7610449,7.78744141 L15.7610234,7.78746289 Z" fill="#009199"></path>
                </svg>
              </i>
            </el-input>
            <!--                <img style="float:right;height:40px" @click="changeImgCode" :src="imgCode" alt="">-->
          </el-form-item>
          <el-form-item class="form_item1" style="width:100%;">
            <!--                <el-button type="info" plain @click="resetLoginForm">重 置</el-button>-->
            <!--                <el-button type="primary" plain @click="login" >登 录</el-button>-->
            <el-button class="login_btn" @click="login">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="foot1">
        浙大宁波理工学院 © 2021 虚拟仿真实验
      </div>
    </div>
  </div>
</template>

<script>
  import Identify from '../components/Identify.vue'
  export default {
    components: {
      Identify
    },
    data () {
      return {
        loginForm: {
          username: '311001', // 3180421050,001
          password: '311001',
          code: ''
        },
        identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
        identifyCode: '',
        loginFormRules: {
          // 验证用户名是否合法
          username: [
            { require: true, message: '请输入登录学号', trigger: 'blur' }
            // { min: 10, max: 10, message: '学号长度为10', trigger: 'blur' }
          ],
          // 验证密码是否合法
          password: [
            { require: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
      }
    },
    mounted () {
      // 初始化验证码
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    methods: {
      // 重置
      resetLoginForm () {
        // console.log(this);
        this.$refs.loginFormRef.resetFields()
      },
      login () {
        if (this.loginForm.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
          this.$message.error('请填写正确验证码')
          this.refreshCode()
        } else {
          this.$refs.loginFormRef.validate(async valid => {
            if (!valid) return
            console.log(this.loginForm)
            const { data: res } = await this.$http.post('/user/login', this.loginForm)
            console.log(res)
            if (res.status !== 200) return this.$message.error('用户名或密码错误！')
            this.$message.success('登录成功！')
            // window.sessionStorage.setItem('token', res.data.token)
            localStorage.setItem('token', res.data.token)
            // window.sessionStorage.setItem('username', res.data.username)
            localStorage.setItem('username', res.data.username)
            localStorage.setItem('role', res.data.role)
            this.$router.push('/home')
          })
        }
      },
      // 重置验证码
      refreshCode () {
        this.identifyCode = ''
        this.makeCode(this.identifyCodes, 4)
      },
      makeCode (o, l) {
        for (let i = 0; i < l; i++) {
          this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
        }
      },
      randomNum (min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      }
    }
  }
</script>

<style scoped>
  .bg{
    /*background-size: cover;*/
    background: url(../assets/img/bj.jpg);
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    width: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  }
  .mc{
    font-size: 22px;
    color: whitesmoke;
  }
  .center{
    margin: 0 auto;
    text-align: center;
    /*transform: scale(0.6);*/
    /*width: 420px;*/
  }
  .login_form{
    background: rgba(0,0,0,0.30);
    border: 1px solid #00E6FF;
    box-shadow: 0 0 10px 0 #04C9DE;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    /*border-radius: 5px;*/
    text-align: center;
    margin: auto;
    margin-top: 35px;
    width: 460px;
    height: 420px;
    /*transform: scale(0.6);*/
  }
  .form_item{
    margin: auto;
    margin-top: 39px;
  }
  .form_item1{
    margin: auto;
    margin-top: 20px;
  }
  .input_first{
    margin: auto;
    /*margin-left: 20px;*/
    height: 48px;
    width: 360px !important;
    background: #FFFFFF;
    border-radius: 30px;
    /*transform: scale(1.01);*/
  }
  /deep/ .el-input__inner{
    magin: auto;
    /*margin-top: 39px;*/
    text-indent: 32px;
    height: 48px;
    width: 360px;
    background: #FFFFFF;
    border-radius: 30px;
    /*transform: scale(1.01);*/
  }
  /deep/ .el-form-item__error{
    left: 80px;
  }
  .login_title{
    font-family: PingFangSC-Semibold;
    font-size: 28px;
    color: #FFFFFF;
    letter-spacing: 1px;
    margin: auto;
    margin-top: 29px;

  }
  .tiao{
    height: 6px;
    width: 102px;
    margin: auto;
    margin-top: 2px;
    border-bottom: solid 4px #00B6C0;
  }
  .title{
    font-family: zihun143-zhengkuchaojihei;
    font-size: 36px;
    color: #FFFFFF;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.50);
    text-align: center;
    margin: auto;
    margin-top: 108px;
    /*transform: scale(0.5);*/
  }
  .logo_title{
    margin: 24px;
  }
  .yanzheng{
    width: 100px;
    height: 34px;
    text-align: center;
    margin: 5px 30px;
    border: 2px solid #009199;
  }
  .yanzheng1{
    width: 100px;
    height: 34px;
  }
  .foot1{
    margin-top: 24px;
    font-family: SourceSansPro-Regular;
    font-size: 16px;
    color: white;
  }
  .login_btn{
    background: #00B6C0;
    border-radius: 30px;
    border: 1px solid #009199;
    color: white;
    width: 100%;
    width: 360px;
    height: 48px;
    font-size: 24px;
    letter-spacing: 0px;
  }
  .icons{
    width: 22px ;
    height :22px;
    margin: 13px auto;
    margin-left: 25px;
  }
  /deep/ input::-webkit-input-placeholder {
    /*padding-left: 30px;*/
  }
</style>
